<template>
  <div class="meal">
    <van-nav-bar fixed title="Meal" left-arrow :border="false" @click-left="goBack"/>
    <van-tabs v-model="activeName" sticky>
      <van-tab :title="$t('meal.6')" name="a">
        <div style="padding:16px">
          <div class="meal-item" v-for="(item,index) in detail.functions" :key="index">
            <div class="meal-header flex flex-align-items-center">
              <div class="flex-none mr10">
                <van-image v-if="index === 0" :src="require('@/assets/images/v1.png')" width="48" height="48" round />
                <van-image v-if="index === 1" :src="require('@/assets/images/v2.png')" width="48" height="48" round />
                <van-image v-if="index === 2" :src="require('@/assets/images/v3.png')" width="48" height="48" round />
              </div>
              <div class="flex-auto width0">
                <div class="title">{{item.mealName}}</div>
                <div class="desc">{{item.mealPrice}}KZ</div>
              </div>
            </div>
            <div class="meal-content">
              <ul>
                <li v-for="(item2,index2) in item.functionDetail" :key="index2">
                  <div>
                    <span class="li-dot"></span>
                    <span>{{item2.productName}}</span>
                  </div>
                  <div>
                    <span style="color:#fb7924">{{item2.num}}</span>
                    <span style="margin-left:5px">{{item2.unit}}</span>
                  </div>
                </li>
              </ul>
              <div class="text-right">
                <cu-button @click="handleBuy(item)">Vai comprar</cu-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="Opcional" name="b">
        <div style="padding:16px">
          <div class="meal-item">
            <div class="meal-header flex flex-align-items-center">
              <div class="flex-none mr10">
                <van-image :src="require('@/assets/images/v3.png')" width="48" height="48" round />
              </div>
              <div class="flex-auto width0">
                <div class="title">{{detail.selfFunction.mealName}}</div>
                <div class="desc">{{ totalSelf | num2Money }}KZ</div>
              </div>
            </div>
            <div class="meal-content">
              <ul>
                <li v-for="(item2,index2) in detail.selfFunction.functionDetail" :key="index2" style="flex-direction: column;align-items: flex-start;">
                  <div>
                    <span class="li-dot"></span>
                    <span></span>
                    <span>{{item2.productName}}</span>
                  </div>
                  <div style="margin-left:14px;margin-top:10px">
                    <span style="color:#fb7924">
                      <input class="meal-input" type="text" v-model="item2.num" @change="changeNum(item2)"/>
                    </span>
                    <span style="margin-left:5px">{{item2.unit}}</span>
                  </div>
                </li>
              </ul>
              <div class="text-right">
                <cu-button @click="handleBuySelf()">Vai comprar</cu-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    
  </div>
</template>
<script>
import CuButton from '@/components/button';
import { Domain } from '@/constants';
import Api from '@/api';
export default {
  name: 'Meal',
  components: {
    CuButton,
  },
  data() {
    return {
      domain: Domain,
      id: '',
      detail: { commodities: {}, functions: [], selfFunction: {} },
      showImg: '',
      activeName:'a',
      imgs:['@/assets/images/v1.png','@/assets/images/v2.png','@/assets/images/v3.png']
    };
  },
  created() {
    const { id } = this.$route.query;
    this.id = id;
    this.loadDetail();
  },
  computed: {
    totalSelf() {
      let total = 0;
      if (this.detail.selfFunction.functionDetail) {
        this.detail.selfFunction.functionDetail.forEach((item) => {
          total = parseFloat((parseFloat(total) * 1000 + parseInt(item.num) * parseFloat(item.price) * 1000) / 1000).toFixed(0);
        });
      }
      return total;
    },
  },
  methods: {
    changeNum(val) {
      if (val.num==''){
        val.num=0
      }
    },
    loadDetail() {
      const params = { commodityId: this.id, language: localStorage.getItem('LANGUAGE') || 'pt' };
      Api.goodsMeal(params).then((res) => {
        console.log(res)
        this.detail = res;
        this.detail.commodities.imgs = res.commodities.imgList ? JSON.parse(res.commodities.imgList) : [];
        this.showImg = this.detail.commodities.imgs.length > 0 ? this.detail.commodities.imgs[0] : '';
        console.log(this.showImg)
      });
    },
    getFuncs(detail) {
      if (detail.functions.length > 0) {
        return detail.functions[0].functionDetail;
      } else {
        return [];
      }
    },
    handleBuy(meal) {
      const params = {
        commodityId: this.id,
        isMeal: 1,
        name: meal.mealName,
        mealId: meal.mealId,
        orderDetails: meal.functionDetail,
      };
      Api.createGoodsMealOrder(params).then((res) => {
        console.log(res);
        // this.$message(this.$t('meal.11'));
        this.$router.push({path:"/pay/"+res.id,query:{price:res.payMoney}})
      });
    },
    handleBuySelf() {
      const fDetail = this.detail.selfFunction.functionDetail.map((item) => {
        return Object.assign(item, { num: parseInt(item.num) });
      });
      const params = {
        commodityId: this.id,
        isMeal: 0,
        name: this.detail.selfFunction.mealName,
        mealId: this.detail.selfFunction.mealId,
        orderDetails: fDetail,
      };
      console.log(params);

      Api.createGoodsMealOrder(params).then((res) => {
        console.log(res);
        // this.$message(this.$t('meal.11'));
        this.$router.push({path:"/pay/"+res.id,query:{price:res.payMoney}})
      });
    },
    goBack(){
      this.$router.push('/send')
    }
  },
};
</script>
<style lang="less" scoped>
.meal {
  padding: 62px 0px 0px;
  .meal-item {
    margin-bottom: 16px;
    border-radius: 4px;
    background: #fff;
    .meal-header {
      height: 63px;
      background: #ffffff;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
      border-radius: 4px 4px 12px 12px;
      padding: 0 16px;
      box-sizing: border-box;
      .title {
        color: #333;
        font-size: 18px;
        font-weight: bold;
      }
      .desc {
        font-size: 14px;
        color: #595959;
      }
    }
    .meal-content {
      padding: 16px;
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          list-style: none;
          color: #595959;
          font-size: 14px;
          margin-bottom: 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .li-dot {
            width: 4px;
            height: 4px;
            border-radius: 4px;
            background-color: #fb8c24;
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            
          }
        }
      }
    }
  }
}
.meal-input {
  max-width: 60px;
  text-align: center;
  margin-right: 10px;
}
</style>
